<script setup lang="ts">
import { getConsultOrderPayUrl } from '@/service/consult'
import { showFailToast, showLoadingToast } from 'vant'
import { ref } from 'vue'
// show是否显示
// onClose 引导用户不要关闭
// orderId 订单号
// actualPayment 支付的金额
const props = defineProps<{
  show: boolean
  orderId: string
  onClose?: () => void
  actualPayment: number
}>()

const emit = defineEmits<{
  (e: 'update:show', val: boolean): void
}>()

// paymentMethod支付的函数
const paymentMethod = ref<0 | 1>()
// pay支付的函数
const pay = async () => {
  if (!paymentMethod.value) return showFailToast('请选择支付方式')
  showLoadingToast({ message: '支付中...', duration: 0 })
  const res = await getConsultOrderPayUrl({
    orderId: props.orderId,
    paymentMethod: paymentMethod.value,
    payCallback: 'http://localhost:5173/room'
  })
  window.location.href = res.data.payUrl // 这个是跳到支付宝的支付页面
}
</script>

<template>
  <!-- 支付类型页面 -->
  <!-- 
      closeable 是否显示关闭图标
      close-on-popstate 是否在页面回退时自动关闭
      close-on-click-overlay 是否在点击遮罩层的时候自动关闭
    -->
  <van-action-sheet
    :show="show"
    @update:show="emit('update:show', $event)"
    title="选择支付方式"
    :closeable="false"
    :close-on-popstate="false"
    :before-close="onClose"
  >
    <div class="pay-type">
      <p class="content">
        ￥ <span>{{ actualPayment.toFixed(2) }}</span>
      </p>
      <van-cell-group>
        <van-cell title="微信支付" @click="paymentMethod = 0">
          <template #icon>
            <cp-icon name="consult-wechat"></cp-icon>
          </template>
          <template #extra>
            <van-checkbox :checked="paymentMethod === 0"></van-checkbox
          ></template>
        </van-cell>
        <van-cell title="支付宝" @click="paymentMethod = 1">
          <template #icon>
            <cp-icon name="consult-alipay"></cp-icon>
          </template>
          <template #extra>
            <van-checkbox :checked="paymentMethod === 1"></van-checkbox
          ></template>
        </van-cell>

        <div class="btn">
          <van-button type="primary" round block @click="pay"
            >立即支付</van-button
          >
        </div>
      </van-cell-group>
    </div>
  </van-action-sheet>
</template>

<style lang="scss" scoped>
.pay-type {
  .amount {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .btn {
    padding: 15px;
  }
  .van-cell {
    align-items: center;
    .cp-icon {
      margin-right: 10px;
      font-size: 18px;
    }
    .van-checkbox :deep(.van-checkbox__icon) {
      font-size: 16px;
    }
  }
}

:deep() {
  .van-popup--bottom.van-popup--round {
    height: 287px;
    border-radius: 10px 10px 10px 10px;
  }
  .van-action-sheet__header {
    font-weight: 400;
  }
  .pay-type {
    .content {
      height: 20px;
      padding: 20px;
      text-align: center;
      color: #323233;
      font-weight: 700;
      font-size: 16px;
    }
  }
}
</style>
